<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="shared/css_js::header">
	<title>jQuery WeUI</title>
	<link rel="stylesheet" type="text/css" href="/static/css/weuicss/weui.min.css"/>
</head>
<style>
	.phoneservice{border-right:1px solid #b6b6b6}
	#sliderProgressBar{
		margin-top: 84px;z-index:9999;position:fixed
	}
	.mui-slider-group{
		margin-top: 84px;
	}
</style>
<body>


<header class="mui-bar mui-bar-nav">
	<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
	<h1 class="mui-title"><font size="4"><b>客服帮助</b></font></h1>
</header>

<div class="mui-content mui-slider">
	<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
		<a class="mui-control-item" th:id="telephone" href="#phoneservice" style="padding: 10px;background-color: white">
			<i class="fa fa-phone-square fa-2x" style="color:grey;"></i>
			<h5>电话客服</h5>
		</a>
		<a class="mui-control-item" href="#onlineservice" style="padding: 10px;background-color: white" >
			<i class="fa fa-tv fa-2x" style="color:grey;"></i>
			<h5>在线客服</h5>
		</a>
	</div>
	<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-6"></div>
	<div class="mui-slider-group">
		<!--电话客服-->
		<div id="phoneservice" class="mui-slider-item mui-control-content "></div>
		<!--在线客服-->
		<div id="onlineservice" class="mui-slider-item mui-control-content ">
				<ul class="mui-table-view">
					<li class="mui-table-view-cell mui-media" style="line-height: 2">
						<div class="weui-flex" >
							<div class="weui-flex__item phoneservice" align="center" >
								<i class="fa fa-dashboard fa-2x" style="color:black;"></i>
								<h5>咨询保养</h5>
							</div>
							<div class="weui-flex__item phoneservice" align="center">
								<i class="fa fa-car fa-2x" style="color:black;"></i>
								<h5>咨询车品</h5>
							</div>
							<div class="weui-flex__item phoneservice" align="center">
								<i class="fa fa-eraser fa-2x" style="color:black;"></i>
								<h5>咨询喷漆</h5>
							</div>
							<div class="weui-flex__item" align="center" th:id="online" onclick="openQQ()">
								<i class="fa fa-envelope fa-2x" style="color:black;"></i>
								<h5>意见反馈</h5>
							</div>
						</div>
					</li>
				</ul>
			</div>
	</div>
	<div class="weui-cells__title" align="center">没有再多内容啦</div><!--没有再多内容啦-->
</div>


</body>
<script>
	/*在线客服调用拨打电话*/
    document.getElementById("telephone").addEventListener('tap',function(){
        var btnArray = ['取消', '呼叫'];
        mui.confirm('18813296010  ', '请联系客服', btnArray, function(e) {
            if (e.index == 1) {
                window.location.href = 'tel:18813296010';//拨打客服电话
            } else {
            }
        })
    });

    /*线上客服*/
    /*document.getElementById('online').addEventListener('tap',function(){
        alert(111);
        if (plus.os.name == "Android") {
            var main = plus.android.runtimeMainActivity();
            var Intent = plus.android.importClass('android.content.Intent');
            var Uri = plus.android.importClass('android.net.Uri');
            var intent = new Intent(Intent.ACTION_VIEW, Uri.parse("mqqwpa://im/chat?chat_type=wpa&uin=2545450604"));
            main.startActivity(intent);
        }
        if (plus.os.name == "iOS") {
            plus.runtime.launchApplication({
                action: "mqq://im/chat?chat_type=wpa&uin=2545450604&version=1&src_type=web"
            }, function(e) {
                plus.nativeUI.confirm("检查到您未安装qq，请先到appstore搜索下载？", function(i) {
                    if (i.index == 0) {
                        iosAppstore("itunes.apple.com/cn/app/mqq/");
                    }
                });
            });
        }

    });*/
    function openQQ() {
        if (plus.os.name == "Android") {

            plus.runtime.launchApplication({
                pname: "com.tencent.mobileqq",
                extra: {

                    url: "mqqwpa://im/chat?chat_type=wpa&uin=2035152316&version=1&src_type=web&web_src=oicqzone.com"
                }
            }, function(e) {
                plus.nativeUI.confirm("检查到您未安装QQ，请先下载安装！", function(i) {
                    if (i.index == 0) {
                        androidMarket("com.tencent.mobileqq");
                    }
                });
            });
        }
        if (plus.os.name == "iOS") {
            plus.runtime.launchApplication({
                action: "mqq://im/chat?chat_type=wpa&uin=2035152316&version=1&src_type=web"
            }, function(e) {
                plus.nativeUI.confirm("检查到您未安装qq，请先到appstore搜索下载？", function(i) {
                    if (i.index == 0) {
                        iosAppstore("itunes.apple.com/cn/app/mqq/");
                    }
                });
            });
        }
    }
</script>
</html>
